<template>
    <div>
        <Card v-if="totalAuctionNum===0">您尚未举办任何拍卖</Card>
        <div v-else>
            <Card v-for="(item,index) in myAuctionList" :value=index :key="item.auctionId">
                <Row>
                    <Col style="height: 80px">
                        <img v-bind:src="myAuctionCoverList[index]" style="height: 100%;width: auto">
                    </Col>
                    <Col>
                        <Row>
                            <p>{{item.auctionName}}</p>
                        </Row>
                        <Row>
                            <p>起拍价格：{{item.auctionStartPrice}}</p>
                        </Row>
                    </Col>
                    <Col>
                        <p>{{item.auctionBrief}}</p>
                    </Col>
                    <Col>
                        <Row>预约人数：{{item.appointmentNum}}</Row>
                        <Row>拍卖时间：{{item.auctionDate}}</Row>
                    </Col>
                    <Col>
                        <Button @click="brief(item.auctionId)">查看拍卖界面</Button>
                    </Col>
                    <Col>
                        <Button @click="deleteAuction(item.auctionId, index)">下架该拍卖</Button>
                    </Col>
                </Row>
            </Card>
            <Col class="mid">
                <Page :total="totalAuctionNum" @on-change="nextPage" page-size="10" show-total/>
            </Col>
        </div>
        <Modal
                v-model="deleteCheck"
                title="确认移除该拍卖？？"
                @on-ok="ok"
                @on-cancel="cancel">
            <p>注：此操作不可撤销。</p>
        </Modal>
    </div>
</template>

<script>
    import globalData from "@/utils/globalData";
    import axios from "axios";

    export default {
        name: "MyAuction",
        data() {
            return {
                userId: '',
                myAuctionList: [],
                nowPage: 1,
                totalAuctionNum: 0,
                myAuctionCoverList: [],
                deleteCheck: false,
                readyToDeleteId: '',
                readyToDeleteIndex: ''
            }
        },
        created: function () {
            let self = this
            this.userId = globalData.USER.userId
            axios({
                method: 'get',
                url: "/auction/seller/" + this.userId + "/1"
            }).then(function (res) {
                self.myAuctionList = res.data.content
                self.totalAuctionNum = res.data.totalElements

                //请求图片封面
                let mySelf = self
                for (let i = 0; i < self.myAuctionList.length; i++) {
                    axios({
                        method: 'get',
                        url: "/file/sig/auction/" + self.myAuctionList[i].coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        mySelf.$set(mySelf.myAuctionCoverList, i, window.URL.createObjectURL(res.data))
                    })
                }
            })
        },
        methods: {
            brief(AuctionId) {
                this.$router.push({name: 'AuctionBrief', params: {auctionId: AuctionId}});
            },
            nextPage(value) {
                this.nowPage = value
                let self = this
                axios({
                    method: 'get',
                    url: "/product/belongTo/" + this.userId + "/" + this.nowPage
                }).then(function (res) {
                    self.myAuctionList = res.data.content
                    //请求拍卖封面
                    self.myAuctionCoverList = []
                    let mySelf = self
                    for (let i = 0; i < self.myAuctionList.length; i++) {
                        axios({
                            method: 'get',
                            url: "/file/sig/auction/" + self.myAuctionList[i].coverUUID,
                            responseType: 'blob'
                        }).then(function (res) {
                            mySelf.$set(mySelf.myAuctionCoverList, i, window.URL.createObjectURL(res.data))
                        })
                    }
                })
            },
            deleteAuction(AuctionId, index) {
                this.deleteCheck = true
                this.readyToDeleteId = AuctionId
                this.readyToDeleteIndex = index
            },
            ok() {
                let self = this
                axios({
                    method: 'delete',
                    url: "/auction/" + this.readyToDeleteId
                }).then(function () {
                    self.$Message.success("删除成功")
                    //前端删除
                    self.myAuctionList.splice(self.readyToDeleteIndex, 1)
                    self.myAuctionCoverList.splice(self.readyToDeleteIndex, 1)
                })
            },
            cancel() {

            }
        }
    }
</script>

<style scoped>

</style>